<template>
	<div>
		<el-container>
			<el-header style="margin-top:40px;">
				<el-steps :active="active" finish-status="success" align-center>
					<el-step title="选择商品分类"></el-step>
					<el-step title="填写商品信息"></el-step>
					<el-step title="填写商品属性"></el-step>
				</el-steps>
			</el-header>
			<el-main>
				<div class="addGoods-div-01">
					<div v-if="active == 1">
						<div class="module-row">
							<div class="module-row-left">
								<div class="classify-icon">
									<i class="el-icon-collection-tag"></i>
									选择分类
								</div>
							</div>
							<el-container>
								<el-main>
									<div class="addGoods-mokuai">
										<div
											v-for="(cardOption,
											$index) in cardOptions"
											:key="$index"
											class="cascader-div clearfix"
										>
											<div
												v-if="$index != 0"
												class="cascader-div-left"
											>
												<img
													src="./../../../../assets/images/u2243.png"
												/>
											</div>
											<el-card class="box-card">
												<div slot="header">
													<span
														>选择第{{
															$index + 1
														}}级分类</span
													>
												</div>
												<!-- 一. 自定义 -->
												<!-- <div style="overflow-y: auto;overflow-x: hidden;height: 335px;"> -->
												<!-- 二. 使用el-scrollbar组件 -->
												<!-- <el-scrollbar wrap-class="list" wrap-style="color: red;" view-style="font-weight: bold;" view-class="view-box" :native="false"> -->
												<div style="height:335px">
													<el-scrollbar
														wrap-class="scrollbar-wrap"
													>
														<div
															v-for="(category,
															index) in cardOption.option"
															:key="
																category.categoryId
															"
															:id="
																category.categoryId
															"
															@click="
																handleCategorySelected(
																	$index,
																	$event
																)
															"
															:class="{
																'card-item': true,
																'card-item-border':
																	index < 8 ||
																	index !=
																		card
																			.option
																			.length,
															}"
														>
															<a>
																<div
																	:class="
																		cardOption.selected ==
																		category.categoryId
																			? 'active'
																			: ''
																	"
																>
																	<div
																		class="a-div"
																	>
																		{{
																			category.categoryName
																		}}
																	</div>
																	<i
																		class="el-icon-arrow-right"
																	></i>
																</div>
															</a>
														</div>
													</el-scrollbar>
												</div>
											</el-card>
										</div>
									</div>
								</el-main>
							</el-container>
						</div>
					</div>
					<div v-if="active == 2">
						<div class="module-row">
							<div class="module-row-left">
								<div class="classify-icon">
									<i class="el-icon-collection-tag"></i>
									基本信息
								</div>
							</div>
							<el-container>
								<el-main>
									<div class="addGoods-mokuai">
										<el-form
											ref="refForm"
											:rules="form.spuRules"
											:model="spu"
											label-width="80px"
										>
											<el-form-item
												label="商品分类"
												prop="category"
											>
												<span
													v-for="(item,
													index) in cardOptions"
													:key="index"
													style="color:#606266;"
												>
													{{
														item.selected != null &&
														index != 0
															? ' > '
															: ''
													}}
													{{
														item.selected != null
															? item.name
															: ''
													}}
													<!-- {{item.selected != null ? item.option.forEach(i => item.selected == i.categoryId
                          ).categoryName : "" }}-->
													<!-- {{item.selected != null ? item.option.forEach(i => {
                                if(item.selected == i.categoryId){
                                  return i.categoryName;
                                }
                          }) : "" }}-->
												</span>
												<div
													@click="editCategory"
													style="display:inline-block;color:#0099FF;margin-left:20px;cursor:pointer;"
												>
													<i class="el-icon-edit"></i>
													<span
														style="font-family:'微软雅黑';font-weight:400;"
														>编辑</span
													>
												</div>
											</el-form-item>
											<el-form-item
												label="商品名称"
												prop="name"
											>
												<el-input
													v-model="spu.name"
													class="addgoods-input-width"
												></el-input>
											</el-form-item>
											<el-form-item
												label="副标题"
												prop="subhead"
											>
												<el-input
													v-model="spu.subhead"
													class="addgoods-input-width"
												></el-input>
											</el-form-item>
											<el-form-item
												label="商品品牌"
												prop="brand"
											>
												<el-select
													v-model="spu.brand"
													class="addgoods-input-width"
													placeholder="请选择商品品牌"
												>
													<el-option
														v-for="item in brands"
														:key="item.id"
														:label="item.name"
														:value="item.id"
													></el-option>
												</el-select>
											</el-form-item>
											<el-form-item
												label="商品介绍"
												prop="desc"
											>
												<el-input
													type="textarea"
													:rows="8"
													v-model="spu.desc"
													class="addgoods-input-width"
												></el-input>
											</el-form-item>
											<el-form-item
												label="运费模板"
												prop="freight"
											>
												<el-select
													v-model="spu.freight"
													class="addgoods-input-width"
													placeholder="请选择运费模板"
												>
													<el-option
														v-for="item in freights"
														:key="item.id"
														:label="item.name"
														:value="item.id"
													></el-option>
												</el-select>
											</el-form-item>
											<el-form-item
												label="商品货号"
												prop="encode"
											>
												<el-input
													v-model="spu.encode"
													class="addgoods-input-width"
													placeholder="如果您不输入商品货号，系统将自动生成一个唯一的货号。"
												></el-input>
											</el-form-item>
											<el-form-item label="服务保证">
												<el-checkbox-group
													v-model="spu.serve"
												>
													<el-checkbox
														label="无忧退货"
														name="serve"
													></el-checkbox>
													<el-checkbox
														label="快速退款"
														name="serve"
													></el-checkbox>
													<el-checkbox
														label="免费包邮"
														name="serve"
													></el-checkbox>
												</el-checkbox-group>
											</el-form-item>
										</el-form>
									</div>
								</el-main>
							</el-container>
						</div>
					</div>
					<div v-if="active == 3">
						<el-form
							:inline="true"
							:rules="form.skuRules"
							:model="form"
							class="demo-form-inline"
						>
							<!-- 商品属性 -->
							<div class="module-row">
								<div class="module-row-left">
									<div class="classify-icon">
										<i class="el-icon-collection-tag"></i>
										商品属性
									</div>
								</div>
								<el-container>
									<el-main>
										<div class="addGoods-mokuai">
											<div class="module">
												<el-form-item
													label="规格参数组:"
												>
													<el-input
														v-model="temp.name"
														:disabled="true"
													></el-input>
												</el-form-item>
											</div>
											<!-- 商品规格 -->
											<div class="module-background">
												<el-form-item
													prop="goodsSpec"
													label="商品规格："
													style="display:block;"
												></el-form-item>
												<el-form-item
													v-for="(item,
													index) in temp.spec"
													:key="index"
													:label="item.name + '：'"
													style="display:block;margin-left:15px;"
												>
													<!-- v-model="item.checked" -->
													<el-checkbox-group
														v-model="
															temp.spec[index]
																.option
														"
														@change="
															handleCheckedCitiesChange
														"
													>
														<el-checkbox
															v-for="($item,
															$index) in item.options"
															:label="$item"
															:key="$index"
														>
															{{ $item }}
															<el-button
																v-if="
																	item.name.indexOf(
																		'颜色'
																	) != -1
																"
																type="text"
																style="font-family:'微软雅黑';font-weight:400;color:#0099FF;"
																@click="
																	deleteColor(
																		index,
																		$index
																	)
																"
																>删除</el-button
															>
														</el-checkbox>
													</el-checkbox-group>
													<div
														v-if="
															item.name.indexOf(
																'颜色'
															) != -1
														"
													>
														<el-input
															v-model="addVal"
															width="100px"
															class="input-color"
														></el-input>
														<el-button
															@click="
																handleAddColor(
																	index
																)
															"
															>增加</el-button
														>
													</div>
												</el-form-item>
											</div>
											<!-- table表 -->
											<div class="module">
												<el-table
													:data="sku.tableData"
													border
													style="width: 100%"
													:header-cell-style="
														headerCellStyle
													"
												>
													<el-table-column
														v-for="(item,
														index) in sku.column"
														:key="index"
														:prop="item.propName"
														:label="item.label"
														width="130"
														align="center"
													></el-table-column>
													<!-- <el-table-column prop="name" label="颜色" width="120" align="center"></el-table-column> -->
													<el-table-column
														label="销售价格 (元)"
														width="180"
														align="center"
													>
														<template scope="scope">
															<el-input
																@blur="
																	initRowInfo(
																		scope.$index,
																		'data'
																	)
																"
																v-model.trim="
																	scope.row
																		.price
																"
															></el-input>
														</template>
													</el-table-column>
													<el-table-column
														label="商品库存"
														width="180"
														align="center"
													>
														<template scope="scope">
															<el-input
																@blur="
																	initRowInfo(
																		scope.$index,
																		'data'
																	)
																"
																v-model.number="
																	scope.row
																		.repertory
																"
															></el-input>
														</template>
													</el-table-column>
													<el-table-column
														label="库存预警值"
														width="180"
														align="center"
													>
														<template scope="scope">
															<el-input
																@blur="
																	initRowInfo(
																		scope.$index,
																		'data'
																	)
																"
																v-model.number="
																	scope.row
																		.warning
																"
															></el-input>
														</template>
													</el-table-column>
													<el-table-column
														label="SKU编号"
														align="center"
														width="180"
													>
														<template scope="scope">
															<el-input
																@blur="
																	initRowInfo(
																		scope.$index,
																		'data'
																	)
																"
																v-model="
																	scope.row
																		.encode
																"
															></el-input>
														</template>
													</el-table-column>
													<el-table-column
														label="操作"
														align="center"
													>
														<template scope="scope">
															<el-button
																type="text"
																size="small"
																@click="
																	handleDelRow(
																		scope.$index,
																		scope
																			.row
																			.id
																	)
																"
																>删除</el-button
															>
															<el-button
																type="text"
																@click="
																	initRowInfo(
																		scope.$index,
																		'image'
																	)
																"
																size="small"
																>上传图片</el-button
															>
														</template>
													</el-table-column>
												</el-table>
												<el-footer
													v-show="sku.page.total > 10"
													class="footer-style"
												>
													<!-- 分页 -->
													<div class="pagination">
														<div class="block">
															<el-pagination
																@current-change="
																	specPageChange
																"
																layout="prev, pager, next"
																:current-page="
																	sku.page
																		.pageNum
																"
																:page-size="
																	sku.page
																		.pageSize
																"
																:pager-count="
																	11
																"
																:total="
																	sku.page
																		.total
																"
															></el-pagination>
														</div>
													</div>
												</el-footer>
											</div>
										</div>
									</el-main>
								</el-container>
							</div>
							<!-- 商品参数 -->
							<div class="module-row">
								<div class="module-row-left">
									<div class="classify-icon">
										<i class="el-icon-collection-tag"></i>
										商品参数
									</div>
								</div>
								<el-container>
									<el-main>
										<div class="addGoods-mokuai">
											<!-- 参数列表 -->
											<div class="module">
												<el-row
													type="flex"
													class="row-bg"
												>
													<el-col :span="4">
														<div
															class="grid-content bg-purple bg-color row-height"
															style="font-weight: bold;color: #909399;"
														>
															参数类型
														</div>
													</el-col>
													<el-col :span="20">
														<div
															class="grid-content bg-purple bg-color row-height"
															style="font-weight: bold;color: #909399;"
														>
															参数值
														</div>
													</el-col>
												</el-row>
												<el-row
													v-for="(item,
													index) in temp.param"
													:key="index"
													type="flex"
													class="row-bg"
												>
													<el-col :span="4">
														<div
															class="grid-content bg-purple row-height"
														>
															{{ item.name }}
														</div>
													</el-col>
													<el-col :span="20">
														<div
															class="grid-content bg-purple row-height"
														>
															<el-date-picker
																value-format="yyyy年MM月dd日"
																format="yyyy年MM月dd日"
																v-if="
																	item.type ==
																		'date'
																"
																v-model="
																	item.value
																"
																align="right"
																@blur="
																	updateSpu(
																		'para'
																	)
																"
																type="date"
																placeholder="选择日期"
																class="select-width-3"
																:picker-options="
																	pickerOptions
																"
															></el-date-picker>
															<el-input
																v-if="
																	item.type ==
																		'text'
																"
																@blur="
																	updateSpu(
																		'para'
																	)
																"
																v-model="
																	item.value
																"
																placeholder
																class="select-width-3"
																size="small"
															></el-input>
														</div>
													</el-col>
												</el-row>
											</div>
										</div>
									</el-main>
								</el-container>
							</div>
							<!-- 商品相册 -->
							<div class="module-row">
								<div class="module-row-left">
									<div class="classify-icon">
										<i class="el-icon-collection-tag"></i>
										商品相册
									</div>
								</div>
								<el-container>
									<el-main>
										<div class="addGoods-mokuai">
											<!-- 图片 -->
											<div class="module-background">
												<div
													class="padding-simple"
													v-if="spu.images.length > 0"
												>
													<!-- 一张图片 -->
													<div
														v-for="(item,
														index) in spu.images"
														:key="index"
														class="img-div"
													>
														<div
															class="demo-image img-div-inner"
														>
															<el-image
																class="img-div-inner-img"
																:src="item.url"
																:fit="image.fit"
															></el-image>
														</div>
														<div
															class="img-div-button"
														>
															<el-button
																type="text"
																@click="
																	item.url ==
																	spu.image
																		.url
																		? null
																		: handleAlbum(
																				item,
																				'set'
																		  )
																"
																:class="{
																	'color-red':
																		item.url ==
																		spu
																			.image
																			.url,
																}"
																>{{
																	item.url ==
																	spu.image
																		.url
																		? '商品'
																		: '设置'
																}}主图</el-button
															>
															<el-button
																@click="
																	handleAlbum(
																		item,
																		'del'
																	)
																"
																type="text"
																>删除图片</el-button
															>
														</div>
													</div>
												</div>
												<div
													class="goodsMessage-button"
												>
													<el-button
														type="primary"
														@click="resetImgDialog"
														>上传图片</el-button
													>
													<el-button
														type="primary"
														@click="
															;(imageStorage.dialog = true),
																(imageStorage.target = 1)
														"
														>从图片库选择</el-button
													>
													<!-- <span class="font-size11">按住ctrl可同时批量选择多张图片上传，最多可以上传5张图片，建议尺寸800*800px</span> -->
												</div>
											</div>
										</div>
									</el-main>
								</el-container>
							</div>
							<!-- 商品详情 -->
							<div class="module-row">
								<div class="module-row-left">
									<div class="classify-icon">
										<i class="el-icon-collection-tag"></i>
										商品详情
									</div>
								</div>
								<el-container>
									<el-main>
										<div class="addGoods-mokuai">
											<!-- 文本域 -->
											<div class="goodsMessage-marginTop">
												<div>
													<!-- <el-radio-group v-model="dialogRadio">
                            <el-radio-button label="1">从图片库选择</el-radio-button>
                            <el-radio-button label="2">移动端上传说明</el-radio-button>
                          </el-radio-group>-->
													<el-button
														type="primary"
														@click="
															imageStorage.dialog = true
															imageStorage.target = 3
														"
														icon="el-icon-upload"
														>从图片库选择</el-button
													>
													<el-button
														type="text"
														@click="
															illustrate = true
														"
														>移动端上传说明</el-button
													>
												</div>
												<editor-bar
													v-model="editor.detail"
													:url="editor.url"
													:isClear="editor.isClear"
													@change="editorChange"
												></editor-bar>
											</div>
										</div>
									</el-main>
								</el-container>
							</div>
						</el-form>
					</div>
					<div class="module-row">
						<div class="module-row-left"></div>
						<el-container>
							<el-main>
								<div class="el-main-footer">
									<el-button
										@click="last"
										v-show="active != 1"
										>上一步,{{ titleLast }}</el-button
									>
									<el-button
										type="primary"
										@click="next"
										v-show="active != 3"
										>下一步，{{ titleNext }}</el-button
									>
									<el-button
										type="primary"
										@click="next"
										v-show="active == 3"
										>提交审核</el-button
									>
								</div>
							</el-main>
						</el-container>
					</div>
				</div>
			</el-main>
		</el-container>
		<!-- 对话框 上传图片 -->
		<el-dialog
			title="上传图片"
			:visible.sync="image.dialog"
			width="50%"
			:before-close="handleClose"
		>
			<el-form
				:inline="true"
				:model="image.data"
				class="demo-form-inline"
			>
				<el-form-item label="商品名称:" label-width="100px">
					<el-input
						placeholder
						v-model="image.data.name"
						:disabled="image.target == 2"
					></el-input>
				</el-form-item>
				<el-form-item label="商品类型名称:" label-width="100px">
					<el-input
						placeholder
						v-model="temp.name"
						:disabled="true"
					></el-input>
				</el-form-item>
				<br />
				<el-form-item
					v-show="image.target == 1"
					v-for="(item, index) in sku.column"
					:key="index"
					:label="item.label + ':'"
					label-width="100px"
				>
					<!-- :prop="item.propName" -->
					<!-- <template scope="scope"> -->
					<!-- <el-input v-model="scope.row.encode"></el-input> -->
					<el-input
						placeholder
						v-model="sku.data[item.propName]"
						:disabled="true"
					></el-input>
					<!-- </template> -->
				</el-form-item>
				<br />
				<el-form-item label="属性图片:" label-width="100px">
					<el-upload
						ref="imgUpload"
						class="upload-demo float-left margin-left-10"
						:action="image.upload.url"
						:http-request="uploadFile"
						:on-preview="handlePreview"
						:on-remove="handleRemove"
						:file-list="image.data.fileList"
						:auto-upload="false"
						list-type="picture"
					>
						<el-button slot="trigger" size="small" type="primary">
							<div
								style="position:absolute;font-size: 18px;top: 11px;"
							>
								<i class="el-icon-upload"></i>
							</div>
							<div style="margin-left:21px;">选择上传文件</div>
						</el-button>
						<el-button
							@click="
								imageStorage.dialog = true
								imageStorage.target = 2
							"
							size="small"
							type="primary"
							style="margin-left:15px;"
						>
							<div
								style="position:absolute;font-size: 18px;top: 11px;"
							>
								<i class="el-icon-upload"></i>
							</div>
							<div style="margin-left:21px;">图库选择</div>
						</el-button>
						<div slot="tip" class="el-upload__tip">
							只能上传jpg/png文件，且不超过500kb
						</div>
					</el-upload>
					<!--  -->
					<!-- <el-upload
          class="upload-demo float-left margin-left-10"
          action="https://jsonplaceholder.typicode.com/posts/"
          :on-preview="handlePreview1"
          :on-remove="handleRemove1"
          :file-list="imgData.fileList1"
          list-type="picture"
        >
          <el-button size="small" type="primary">选择上传文件</el-button>
          <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
          </el-upload>-->
				</el-form-item>
				<br />
				<el-form-item
					label="商品默认选择:"
					label-width="100px"
					v-show="image.target == 1"
				>
					<el-radio-group
						@change="handleImgRadio"
						v-model="image.radio"
					>
						<el-radio label="1">是</el-radio>
						<el-radio label="2">否</el-radio>
					</el-radio-group>
					<!-- <el-radio v-model="image.radio" label="1">是</el-radio>
          <el-radio v-model="image.radio" label="2">否</el-radio>-->
				</el-form-item>
			</el-form>
			<span slot="footer" class="dialog-footer">
				<el-button @click="image.dialog = false">取 消</el-button>
				<el-button type="primary" @click="handleSave">确 定</el-button>
			</span>
		</el-dialog>
		<!-- 对话框 图片库 -->
		<el-dialog
			title="从图库选择"
			:visible.sync="imageStorage.dialog"
			width="50%"
			:before-close="handleClose"
		>
			<div>
				<div class="float-left">全部图片</div>
				<div class="float-right">
					<el-select
						v-model="imageStorage.selected"
						placeholder="请选择"
						size="small"
					>
						<el-option
							v-for="item in imageStorage.albumList"
							:key="item.value"
							:label="item.label"
							:value="item.value"
						></el-option>
					</el-select>
				</div>
			</div>
			<!-- 图片列表 -->
			<div class="checkbox-module">
				<el-checkbox-group v-model="imageStorage.checkList">
					<el-checkbox
						:label="item"
						v-for="(item, index) in imageStorage.imageList"
						:key="index"
					>
						<!-- 一张图片 -->
						<div class="demo-image">
							<el-image
								style="width:80px; height:80px"
								:src="item.toString()"
								:fit="image.fit"
							></el-image>
						</div>
					</el-checkbox>
				</el-checkbox-group>
			</div>
			<!-- 分页 -->
			<div class="goodMessage-page">
				<div class="block">
					<el-pagination
						layout="prev, pager, next"
						@current-change="imagePageChange"
						:hide-on-single-page="true"
						:current-page="imageStorage.page.pageNum"
						:page-size="imageStorage.page.pageSize"
						:pager-count="11"
						:total="imageStorage.page.total"
					></el-pagination>
				</div>
			</div>
			<span slot="footer" class="dialog-footer">
				<el-button
					@click="
						imageStorage.dialog = false
						imageStorage.checkList = []
					"
					>取 消</el-button
				>
				<el-button type="primary" @click="handleImgStorage"
					>确 定</el-button
				>
			</span>
		</el-dialog>
		<!-- 对话框 上传说明 -->
		<el-dialog
			title="上传说明"
			:visible.sync="illustrate"
			width="50%"
			:before-close="handleClose"
		>
			<span>
				<h4>一、基本要求</h4>
				<p>
					1、手机详情总体大小：图片+文字，图片不超过20张，文字不超过5000字；建议：所有图片都是本宝贝相关的图片。
				</p>

				<h4>二、图片大小</h4>

				<p>1、建议使用宽度480 ~ 620像素、高度小于等于960像素的图片；</p>
				<p>
					2、格式为：JPG\JEPG\GIF\PNG；
					举例：可以上传一张宽度为480，高度为960像素，格式为JPG的图片。
				</p>
				<h4>三、文字要求</h4>
				<p>
					1、每次插入文字不能超过500个字，标点、特殊字符按照一个字计算；
				</p>
				<p>
					2、请手动输入文字，不要复制粘贴网页上的文字，防止出现乱码；
				</p>
				<p>3、以下特殊字符“>”、“"”、“'”、“\”会被替换为空。</p>
			</span>

			<span slot="footer" class="dialog-footer">
				<el-button @click="illustrate = false">取 消</el-button>
				<el-button type="primary" @click="illustrate = false"
					>确 定</el-button
				>
			</span>
		</el-dialog>
	</div>
</template>

<script>
import EditorBar from '@/components/wangEnduit'
import request from '@/utils/request'
import classifyApi from '@/api/goods/classify'
import brandApi from '@/api/goods/brand'
import templateApi from '@/api/goods/template'
import specApi from '@/api/goods/spec'
import paraApi from '@/api/goods/para'
import skuApi from '@/api/goods/sku'
import spuApi from '@/api/goods/spu'
import freightApi from '@/api/settings/freight'
// 文件引入（注意：由于是函数，故名字要和函数的名字一致）
// import { dateFormat } from 'vux' 使用失败 原因
import moment from 'moment'
import axios from 'axios'

export default {
	data() {
		var validateEncode = (rule, value, callback) => {
			// if (!value) {
			//   return callback(new Error("不能为空"));
			// }
			setTimeout(() => {
				if (value == '' || value == undefined) {
					// dateFormat(d,"YYYY-MM-DD HH:mm:ss");
					// var date =  moment(new Date()).format("yyyyMMDDHHmmssSSS");
					// Y 年 M 月 d 天 H 时 m 分 s 秒 S 毫秒  注： y 无效
					this.spu.encode =
						'No.' + moment(new Date()).format('YYYYMMDDHHmmssSSS')
				} else {
					var regx = /No\./
					if (!regx.test(value)) {
						this.spu.encode = 'No.' + value
					}
				}
				// 验证后一定得调用callback()回调函数
				callback()
			}, 1000)
		}
		return {
			pickerOptions: {
				disabledDate(time) {
					return time.getTime() > Date.now()
				},
			},
			active: 1,
			titleNext: '填写商品信息',
			titleLast: '',
			// 分类选择
			options: [],
			cardOptions: [],
			// 品牌列表
			brands: [],
			// 运费模板列表
			freights: [],
			// 规格参数模板
			temp: {
				id: null,
				name: '',
				spec: [],
				param: [],
			},
			//  商品spu
			spu: {
				id: 8,
				name: '',
				subhead: '',
				category: [],
				brand: null,
				freight: null,
				desc: '',
				encode: '',
				serve: [],
				image: {},
				images: [],
			},
			// 商品sku
			sku: {
				// 表格行对象
				data: {
					name: '',
					price: '',
					repertory: '',
					warning: '',
					encode: '',
					image: {
						url: '',
						name: '',
					},
					images: [],
				},
				column: [],
				tableData: [],
				specArr: [],
				page: {
					pageNum: 1,
					pageSize: 10,
					total: 11,
				},
			},
			// 表单
			form: {
				spuRules: {
					category: [{ required: true }],
					name: [
						{
							required: true,
							message: '请输入商品名称',
							trigger: 'blur',
						},
					],
					subhead: [
						{
							required: true,
							message: '请输入商品副标题',
							trigger: 'blur',
						},
					],
					brand: [
						{
							required: true,
							message: '请选择商品品牌',
							trigger: 'change',
						},
					],
					desc: [
						{
							required: true,
							message: '请输入商品简介',
							trigger: 'blur',
						},
					],
					freight: [
						{
							required: true,
							message: '请选择运费模板',
							trigger: 'change',
						},
					],
					encode: [
						{
							required: true,
							validator: validateEncode,
							trigger: 'blur',
						},
					],
				},
				skuRules: {
					goodsSpec: [{ required: true }],
					// repertory: [
					//   { required: true, message: "请输入商品名称", trigger: "blur" }
					// ],
				},
			},
			// 颜色添加
			addVal: '',
			// 富文本编辑器
			editor: {
				isClear: false,
				detail: '',
				url:
					request.defaults.baseURL +
					'/api-goods/spu/uploadImage/editor',
			},
			// 对话框 图片上传
			image: {
				// 图片 渲染方式 组
				// fits: ["fill"],
				// 图片渲染方式
				fit: 'cover',
				// 对话框 上传图片
				dialog: false,
				// 是否为主图
				radio: '2',
				// 缓存图片对象
				temp: {},
				remove: [],
				// 图片操作类型 1 SKU 2 SPU
				target: null,
				upload: {
					url: '',
					fileData: {},
					fileList: [],
				},
				data: {
					name: '',
					fileList: [],
				},
			},

			// 对话框 对象
			dialogRadio: '1',

			// 对话框 图片库
			imageStorage: {
				page: {
					pageNum: 1,
					pageSize: 10,
					total: null,
				},
				dialog: false,
				// 数据填充对象
				target: null,
				selected: null,
				imageList: [],
				albumList: [],
				//  选中的图片
				checkList: [],
			},

			// 对话框 上传说明
			illustrate: false,
		}
	},
	components: { EditorBar },
	methods: {
		// 初始化商品分类card
		initData() {
			// classifyApi.getCategoryList().then((response) => {
			// 	this.options = response.data.data
			// 	let card = {
			// 		selected: null,
			// 		name: null,
			// 		option: this.options,
			// 	}
			// 	// this.card.option = this.options;
			// 	this.cardOptions.splice(this.cardOptions.length, 0, card)
			// })
			brandApi.listAll().then((response) => {
				this.brands = response.data.data
			})
			freightApi.listAll().then((response) => {
				this.freights = response.data.data
            })
            this.initCategoryList();
		},
		async initCategoryList() {
			await axios
				.get(request.defaults.baseURL +'/api-goods/category/listAllVo')
				.then((response) => {
					this.options = response.data.data
					let card = {
						selected: null,
						name: null,
						option: this.options,
					}
					// this.card.option = this.options;
					this.cardOptions.splice(this.cardOptions.length, 0, card)
				})
		},
		initTempSpec() {
			specApi.findByTemplateId(this.temp.id).then((response) => {
				var spe = response.data.data
				spe.forEach((item, index) => {
					// 规格数组
					var spec = {
						id: item.id,
						name: item.name,
						option: [],
						options: item.options.split(';'),
					}
					this.temp.spec.splice(this.temp.spec.length, 0, spec)
					// 规格表 规格属性
					var head = {
						label: item.name,
						propName: 'spec_' + index,
					}
					this.sku.column.splice(
						index,
						this.sku.column.length - index,
						head
					)
				})
			})
		},
		// 更新规格选项
		updateSpecById(value) {
			var options
			this.temp.spec[value].options.forEach((item, index) => {
				if (index == 0) {
					options = item
				} else {
					options += ';' + item
				}
			})
			var spec = {
				id: this.temp.spec[value].id,
				options,
			}
			specApi.updateById(spec)
		},
		// 初始化Sku规格表
		initSkuSpecTable() {
			skuApi
				.pageList(
					this.sku.page.pageNum,
					this.sku.page.pageSize,
					this.spu.id
				)
				.then((response) => {
					this.sku.page.total = response.data.data.total
					response.data.data.list.forEach((item, index) => {
						var price = Number(item.price).toFixed(2)
						var unit = {
							id: item.id,
							encode: item.encode,
							name: item.name,
							price: isNaN(price) ? null : price,
							repertory: item.repertory,
							warning: item.warning,
							spuId: item.spuId,
							image: {},
							images: [],
						}
						if (item.image) {
							unit.image = JSON.parse(item.image)
						}
						if (item.images) {
							unit.images = JSON.parse(item.images)
						}
						var specs = JSON.parse(item.spec)
						specs.forEach(($item) => {
							// var specItem = $item.split(":");
							// 动态添加对象属性
							// this.$set(this.sku.data, specItem[0], specItem[1]);
							// 将数据转成JSON数据 由于data数据是动态绑定 不进行转换将导致数据全部一致
							// var json = JSON.stringify(target);
							// 将JSON数据转为对象  并添加到对象数据表中
							this.$set(unit, $item.prop, $item.value)
						})
						this.sku.tableData.splice(
							index,
							this.sku.tableData.length - index,
							// JSON.parse(json)
							unit
						)
					})
				})
		},
		// 初始化参数列表
		initTempParam() {
			paraApi.findByTemplateId(this.temp.id).then((response) => {
				response.data.data.forEach((item, index) => {
					var param = {
						name: item.name,
						type: item.name == '上市年份' ? 'date' : 'text',
						value: null,
					}
					this.temp.param.splice(
						index,
						this.temp.param.length - index,
						param
					)
				})
			})
		},
		// 初始化模板信息
		initFormTempName() {
			templateApi.findById(this.temp.id).then((response) => {
				this.temp.name = response.data.data.name
			})
		},
		// 初始化 图库
		initImageStorage() {
			this.axios
				.get(request.defaults.baseURL + '/api-goods/album/findAll')
				.then((response) => {
					response.data.msg.forEach((item, index) => {
						var storage = {
							value: item.id,
							label: item.title,
						}
						this.imageStorage.albumList.splice(
							index,
							this.imageStorage.albumList.length - index,
							storage
						)
					})
				})
		},
		updateImgStorage() {
			var formData = new FormData()
			formData.append('id', this.imageStorage.selected)
			this.axios
				.post(
					request.defaults.baseURL + '/api-goods/album/findById',
					formData
				)
				.then((response) => {
					this.imageStorage.imageList = response.data.msg.split(',')
				})
		},
		handleImgStorage() {
			this.imageStorage.dialog = false
			if (this.imageStorage.checkList.length > 0) {
				this.imageStorage.checkList.forEach((item) => {
					var img = {
						url: item,
					}
					if (this.imageStorage.target == 1) {
						var hasImg = this.spu.images.some(
							($item) => $item.url == item
						)
						if (!hasImg) {
							this.spu.images.splice(
								this.spu.images.length,
								0,
								img
							)
							this.updateSpu('images')
						}
					} else if (this.imageStorage.target == 2) {
						if (
							!this.image.data.fileList.some(
								($item) => $item.url == item
							)
						) {
							this.image.data.fileList.splice(
								this.image.data.fileList.length,
								0,
								img
							)
						}
					} else if (this.imageStorage.target == 3) {
						var html =
							'<p><img src="' +
							item +
							'" style="max-width:100%;"><br></p>'
						this.editor.detail += html
					}
				})
			}
			this.imageStorage.checkList = []
		},

		hasSpuData() {
			// console.log(this.$route.query.id);
			if (this.$route.query.id != undefined) {
				this.active = 2
				spuApi.getOne(this.$route.query.id).then((result) => {
					const temp = result.data.data
					var category = temp.categoryId.split(';')
					this.spu = {
						id: temp.id,
						name: temp.name,
						subhead: temp.caption,
						category: category,
						brand: temp.brandId,
						freight: temp.freightId,
						desc: temp.introduction,
						encode: temp.encode,
						serve: [],
						image: {},
						images: [],
						// para: [],
					}
					if (temp.service) {
						this.spu.serve = temp.service.split(';')
					}
					category.forEach((item, index) => {
						this.setCategorySelected(index, item - 0)
					})
					if (temp.image) {
						// this.$set(this.spu,"images",JSON.parse(temp.image))
						this.spu.image = JSON.parse(temp.image)
					}
					if (temp.images) {
						this.$set(this.spu, 'images', JSON.parse(temp.images))
					}
					if (temp.para) {
						this.$set(this.temp, 'param', JSON.parse(temp.para))
					}
					this.editor.detail = temp.description
				})
			}
		},

		setCategorySelected(index, selected) {
			this.$set(this.cardOptions[index], 'selected', selected)
			// 设置模板ID
			this.cardOptions[index].option.forEach((item) => {
				if (selected == item.categoryId) {
					this.cardOptions[index].name = item.categoryName
					this.$set(this.temp, 'id', item.categoryTemplateId)
				}
				if (item.categoryId == selected && item.childList.length > 0) {
					let card = {
						selected: null,
						name: null,
						option: item.childList,
					}
					this.cardOptions.splice(
						index + 1,
						this.cardOptions[index].option.length - index - 1,
						card
					)
				}
			})
		},

		// 分类选择操作
		handleCategorySelected(level, event) {
			this.setCategorySelected(level, event.currentTarget.id)
			// 商品spu分类ID数组
			this.spu.category.splice(
				level,
				this.spu.category.length - level,
				event.currentTarget.id
			)
		},
		// 编辑分类
		editCategory() {
			this.active = 1
		},

		// 富文本操作
		editorChange() {},

		// SKU
		// 删除颜色
		deleteColor(index, item) {
			this.temp.spec[index].options.splice(item, 1)
			this.updateSpecById(index)
		},
		// 添加颜色
		handleAddColor(value) {
			if (this.addVal != '') {
				this.temp.spec[value].options.splice(
					this.temp.spec[value].options.length,
					0,
					this.addVal
				)
				this.addVal = ''
				this.updateSpecById(value)
			}
		},
		// 规格选择处理
		handleCheckedCitiesChange() {
			var total = []
			this.temp.spec.forEach((item, index) => {
				if (item.option.length > 0) {
					// 排序数组并赋值
					total[index] = item.option.sort((a, b) =>
						a.localeCompare(b)
					)
				}
				// 动态 字符串 => 对象属性名字段 使用括号表示法
				// console.log("prop："+this.sku.data[ "spec_" + index ]);
			})
			if (total.length == this.temp.spec.length) {
				this.combination(total, 0, this.sku.data)
			}
			// console.log(value);
		},
		// 数组组合算法
		combination(arr, index, target) {
			for (let i = 0; i < arr[index].length; i++) {
				const element = arr[index][i]
				let specTemp = {
					label: this.sku.column[index].label,
					prop: 'spec_' + index,
					value: element,
				}
				this.sku.specArr.splice(
					index,
					this.sku.specArr.length - index,
					// "spec_" + index + ":" + element
					specTemp
				)
				if (index == arr.length - 1) {
					var formData = {
						spec: JSON.stringify(this.sku.specArr),
						spuId: this.spu.id,
					}
					skuApi.add(formData).then(() => {
						this.initSkuSpecTable()
					})
				}
				if (index < arr.length - 1) {
					let tempIndex = index + 1
					this.combination(arr, tempIndex, target)
				}
			}
		},
		// 规格table表 删除当前行
		handleDelRow(index, id) {
			skuApi.deleteById(id).then(() => {
				this.sku.tableData.splice(index, 1)
			})
		},
		// 规格table表 初始化行元素对象
		initRowInfo(index, value) {
			this.sku.data = this.sku.tableData[index]
			// 如果SKU名称为空 SKU名称就是SPU名称
			if (this.sku.data.name == '' || this.sku.data.name === undefined) {
				this.sku.data.name = this.spu.name
			}
			if (value == 'image') {
				this.image.target = 1
				this.image.upload.fileData = new FormData()
				this.image.data.name = this.sku.data.name
				this.image.upload.fileData.append('skuId', this.sku.data.id)
				// this.image.data.fileList = this.sku.data.images;
				this.image.data.fileList = []
				this.sku.data.images.forEach((item, index) => {
					this.image.data.fileList.splice(
						index,
						this.image.data.fileList.length - index,
						item
					)
				})
				this.image.radio = '2'
				this.image.dialog = true
			} else if (value == 'data') {
				this.updateSku()
			}
		},
		updateSku() {
			this.sku.data.name = this.image.data.name
			var unit = {
				id: this.sku.data.id,
				encode: this.sku.data.encode,
				name: this.sku.data.name,
				price: this.sku.data.price,
				repertory: this.sku.data.repertory,
				warning: this.sku.data.warning,
				spuId: this.sku.data.spuId,
				image: JSON.stringify(this.sku.data.image),
				images: JSON.stringify(this.sku.data.images),
			}
			skuApi.updateById(unit).then(() => {
				this.initSkuSpecTable()
			})
		},
		// 当前页更改后操作
		specPageChange(value) {
			this.sku.page.pageNum = value
			this.initSkuSpecTable()
		},

		// 当前页更改后操作
		imagePageChange(value) {
			this.imageStorage.page.pageNum = value
			this.updateImgStorage()
		},

		// SPU
		// 相册操作
		handleAlbum(image, type) {
			if (type == 'set') {
				this.spu.image = image
				this.updateSpu('image')
			} else if (type == 'del') {
				if (this.spu.image.url == image.url) {
					this.spu.image = {}
				}
				this.spu.images.forEach((item, index) => {
					if (item.url == image.url) {
						this.spu.images.splice(index, 1)
					}
				})
				if (image.name) {
					spuApi.deleteImage(image.name, this.spu.id)
					// .then(() => {
					//   this.updateSpu();
					// });
				}
				this.updateSpu('images')
			}
		},
		updateSpu(target) {
			var unit
			if (target.constructor == String) {
				unit = {
					id: this.spu.id,
				}
				if (target == 'para') {
					this.$set(unit, target, JSON.stringify(this.temp.param))
				} else if (target == 'description') {
					this.$set(unit, target, this.editor.detail)
				} else {
					this.$set(unit, target, JSON.stringify(this.spu[target]))
				}
			} else if (target.constructor == Object) {
				unit = target
			} else if (!target) {
				unit = {
					id: this.spu.id,
					encode: this.spu.encode,
					name: this.spu.name,
					caption: this.spu.subhead,
					brandId: this.spu.brand,
					categoryId: this.arrayToString(this.spu.category),
					templateId: this.temp.id,
					freightId: this.spu.freight,
					service: this.arrayToString(this.spu.serve),
					introduction: this.spu.desc,
					para: JSON.stringify(this.temp.param),
					image: JSON.stringify(this.spu.image),
					images: JSON.stringify(this.spu.images),
				}
			}
			spuApi.updateById(unit).then(() => {})
		},
		initAlbum() {
			spuApi.getOne(this.spu.id).then((response) => {
				this.spu = response.data.data
			})
		},
		resetImgDialog() {
			this.image.target = 2
			this.image.upload.fileData = new FormData()
			this.image.upload.fileData.append('spuId', this.spu.id)
			this.image.data.name = this.spu.name
			// this.image.data.fileList = this.spu.images;
			this.image.data.fileList = []
			this.spu.images.forEach((item, index) => {
				this.image.data.fileList.splice(
					index,
					this.image.data.fileList.length - index,
					item
				)
			})
			this.image.dialog = true
		},

		// 对话框
		// 上传图片
		// 覆盖默认的上传行为，可以自定义上传的实现
		uploadFile(file) {
			this.image.upload.fileData.append('files', file.file)
		},
		// 删除图片
		handleRemove(file, fileList) {
			if (file.status == 'success') {
				// var img = {
				//   url: file.url
				// };
				// if (file.name) {
				//   this.$set(img, "name", file.name);
				// }
				this.image.remove.splice(this.image.remove.length, 0, file)
			}
			this.image.data.fileList = fileList
		},
		// 点击图片列表 单张图片
		handlePreview(file) {
			// 当前图片是否为主图
			// 如果是主图设置radio显示
			if (file.name != this.sku.data.image.name) {
				this.image.radio = '2'
			} else {
				this.image.radio = '1'
			}
			this.image.temp = file
		},

		// 是否设置为主图
		handleImgRadio() {
			// 缓存图片对象
			if (this.image.temp) {
				// 设置主图
				if (this.image.radio == '1') {
					this.sku.data.image.name = this.image.temp.name
				} else if (this.image.radio == '2') {
					// 取消主图
					this.sku.data.image = ''
				}
			}
		},
		// 上传图片保存操作
		async handleSave() {
			this.image.dialog = false
			this.$refs.imgUpload.submit()
			await axios
				.post(this.image.upload.url, this.image.upload.fileData, {
					headers: { 'Content-Type': 'multipart/form-data' },
				})
				.then((response) => {
					if (response.data.data) {
						response.data.data.forEach((item) => {
							var img = {
								url:
									request.defaults.baseURL +
									'/api-goods' +
									item.url,
								name: item.name,
								size: item.size,
							}
							this.image.data.fileList.splice(
								this.image.data.fileList.length,
								0,
								img
							)
							if (this.image.target == 1) {
								if (this.sku.data.image.name == item.name) {
									this.sku.data.image = img
								}
							} else if (this.image.target == 2) {
								if (this.spu.image.name == item.name) {
									this.spu.image = img
								}
							}
						})
					}
				})
				.catch(() => {
					console.log('Error：' + new Date())
				})
			if (this.image.target == 1) {
				if (this.image.data.fileList.length > 0) {
					this.image.data.fileList.forEach((item, index) => {
						var img = {
							url: item.url,
							name: item.name,
							size: item.size,
						}
						this.sku.data.images.splice(
							index,
							this.sku.data.images.length - index,
							img
						)
					})
				} else {
					this.spu.images = []
				}
				if (this.image.remove && this.image.remove.length > 0) {
					this.image.remove.forEach((item) => {
						if (item.url == this.sku.data.image.url) {
							this.sku.data.image = {}
						}
						if (item.name) {
							skuApi
								.deleteImage(item, this.sku.data.id)
								.then(() => {})
						}
					})
				}
				this.updateSku()
			} else if (this.image.target == 2) {
				if (this.image.data.fileList.length > 0) {
					this.image.data.fileList.forEach((item, index) => {
						var img = {
							url: item.url,
							name: item.name,
							size: item.size,
						}
						this.spu.images.splice(
							index,
							this.spu.images.length - index,
							img
						)
					})
				} else {
					this.spu.images = []
				}
				if (this.image.remove && this.image.remove.length > 0) {
					this.image.remove.forEach((item) => {
						if (item.url == this.spu.image.url) {
							this.spu.image = {}
						}
						if (item.name) {
							spuApi.deleteImage(item, this.spu.id).then(() => {})
						}
					})
				}
				var unit = {
					id: this.spu.id,
					image: JSON.stringify(this.spu.image),
					images: JSON.stringify(this.spu.images),
				}
				this.updateSpu(unit)
				// spuApi.updateById(unit).then(() => {});
			}
		},

		//  操作
		// 下一步
		next() {
			if (this.active == 1) {
				// 商品分类
				if (this.cardOptions[0].selected == null) {
					this.$message({
						message: '请选择一个分类！',
						type: 'warning',
						center: true,
					})
				} else {
					this.active = 2
					this.initTempParam()
				}
			} else if (this.active == 2) {
				this.initFormTempName()
				this.initTempSpec()
				// 基本商品信息
				// 提交验证
				this.$refs['refForm'].validate((valid) => {
					if (valid) {
						var formData = {
							encode: this.spu.encode,
							name: this.spu.name,
							caption: this.spu.subhead,
							brandId: this.spu.brand,
							categoryId: this.arrayToString(this.spu.category),
							templateId: this.temp.id,
							freightId: this.spu.freight,
							service: this.arrayToString(this.spu.serve),
							introduction: this.spu.desc,
						}
						spuApi.add(formData).then((response) => {
							this.spu.id = response.data.data
							if (this.spu.id) {
								this.active = 3
								this.initSkuSpecTable()
								this.initImageStorage()
							}
						})
					} else {
						this.$message({
							message: '商品信息格式不正确或缺失！',
							type: 'warning',
							center: true,
						})
						return false
					}
				})
			} else if (this.active == 3) {
				this.updateSpu('description')
				this.$router.go(-1)
				this.$message({
					message: '商品信息已提交，待审核中.....',
					type: 'success',
					center: true,
				})
				this.active = 1
			}
		},
		// 上一步
		last() {
			this.active--
		},

		// 对话框 关闭确认弹窗
		handleClose(done) {
			this.$confirm('确认关闭？')
				.then(() => {
					done()
				})
				.catch(() => {})
		},
		headerCellStyle() {
			return 'background-color: #f9fafc;'
		},
		arrayToString(arr) {
			var arrStr = ''
			arr.forEach((item, index) => {
				if (index == 0) {
					arrStr = item
				} else {
					arrStr += ';' + item
				}
			})
			return arrStr
		},
	},
	//监听器：
	watch: {
		active: function(newValue) {
			if (newValue == 1) {
				this.titleNext = '填写商品信息'
			}
			if (newValue == 2) {
				this.titleNext = '填写商品属性'
				this.titleLast = '选择商品分类'
			}
			if (newValue == 3) {
				this.titleLast = '填写商品信息'
			}
		},
		'image.target': function(value) {
			if (value == 1) {
				this.image.upload.url =
					request.defaults.baseURL + '/api-goods/sku/uploadImage'
			} else if (value == 2) {
				this.image.upload.url =
					request.defaults.baseURL + '/api-goods/spu/uploadImage'
			}
		},
		'imageStorage.selected': function() {
			this.updateImgStorage()
		},
	},
	created() {
		this.initData()
	},
	mounted() {
		this.hasSpuData()
	},
}
</script>
<style scoped>
/* 图片选中 */
.checkbox-module {
	padding: 20px 0 20px 10px;
	margin: auto;
	margin-top: 50px;
}

.goodMessage-page {
	float: right;
}
/*  */
.float-left {
	float: left;
}
.float-right {
	float: right;
}
.color-red {
	color: #f04844;
}
.margin-left-10 {
	margin-left: 10px;
}
.padding-simple {
	padding: 20px;
}
.img-div {
	margin-top: 10px;
	width: 170px;
	display: inline-block;
	border: 1px solid #e4e4e4;
	border-radius: 5px;
}
.img-div-inner {
	padding: 15px;
}
.img-div-inner-img {
	width: 140px;
	height: 140px;
	border-radius: 2px;
}
.img-div-button {
	width: 170px;
	border-top: 1px solid #e4e4e4;
	height: 40px;
	background-color: rgb(240, 240, 240);
	text-align: center;
}
.goodsMessage-button {
	margin-top: 8px;
	padding-left: 70px;
}
.marginleft-button {
	margin-left: 10px;
}
/*第二模块  */
/* .addGoods-mokuai2 {
  padding-top: 30px;
  padding-left: 20px;
  background-color: #fff;
} */
.addgoods-input-width {
	width: 500px;
}
.addgoods-input-width textarea {
	overflow-y: visible;
}
/*  */
.goodsMessage-marginTop {
	margin-top: 20px;
}
.select-width-3 {
	width: 300px;
}
.el-main-footer {
	width: 96%;
	border-top: 1px solid #f1f1f1;
	/* position: absolute; */
	text-align: center;
	padding-top: 12px;
	margin-left: 2%;
	margin-bottom: 30px;
}
/*  模块 */
.addGoods-mokuai {
	padding-top: 20px;
	padding-left: 20px;
}
.module {
	/* width: 100%; */
	margin-top: 30px;
}
.module-background {
	/* 需要注意的是，运算符前后都需要保留一个空格，例如：width: calc(100% - 10px)； */
	width: calc(100% - 42px);
	padding: 20px;
	background-color: #f9fafc;
	border: 1px solid #e4e4e4;
}
.module-row {
	width: calc(100% - 202px);
	min-height: 100%;
	padding-left: 180px;
	padding-right: 20px;
	background-color: #fff;
	position: relative;
}
.module-row-left {
	z-index: 1;
	width: 180px;
	/* min-height: calc(100% - 20px); */
	border-right: 1px solid #e4e4e4;
	background-color: #fcfcfc;
	position: absolute;
	bottom: 0px;
	left: 0px;
	top: 0px;
}
.addGoods-div-01 {
	border: 1px solid #e4e4e4;
	margin-bottom: 20px;
	background-color: #fff;
}
.addGoods-div-02 {
	z-index: 1;
	width: 180px;
	border-right: 1px solid #e4e4e4;
	background-color: #fcfcfc;
	bottom: 0px;
	left: 0px;
	top: 0px;
	position: absolute;
}
/* 级联模块 */
.cascader-div {
	margin-top: 20px;
	margin-bottom: 50px;
	height: 400px;
	float: left;
}
/* 级联模块 左边箭头 */
.cascader-div-left {
	vertical-align: middle;
	margin: 0 10px;
	display: inline-block;
}
/* 级联模块 card */
.box-card {
	vertical-align: middle;
	width: 280px;
	height: 394px;
	display: inline-block;
	color: #999999;
}
.cascader-div .box-card .card-item {
	font-size: 14px;
	width: 280px;
	line-height: 41px;
	height: 41px;
	text-align: left;
}
.card-item-border {
	border-bottom: 1px solid #e4e4e4;
}
.card-item a {
	height: 41px;
	color: #999999;
}
.card-item .active {
	background-color: rgba(242, 242, 242, 1);
	color: #0099ff;
}
.card-item .a-div {
	padding-left: 20px;
	width: 225px;
	display: inline-block;
}
/* .item-content:after {
  content: "\e6e0";
} */

.clearfix:before,
.clearfix:after {
	display: inline-table;
	content: '';
}
.clearfix:after {
	clear: both;
}
.input-color {
	width: 150px;
}
.el-checkbox {
	margin-right: 10px;
}
.box-card-list {
	overflow-y: auto;
	overflow-x: hidden;
	height: 335px;
}
.classify-icon {
	background: url('./../../../../assets/images/u2198.png') no-repeat;
	width: 200px;
	height: 50px;
	line-height: 50px;
	color: #fff;
	padding-left: 40px;
	position: absolute;
	top: 60px;
	right: -60px;
}
.footer-style {
	background-color: #fdfdfe;
	height: 60px;
	line-height: 60px;
	border: 1px solid #ebeef5;
	border-top: 0;
	position: relative;
}
.footer-style .pagination {
	position: absolute;
	right: 10px;
	display: inline-block;
	top: 15px;
}
</style>
<style>
.box-card .el-card__body {
	padding: 0;
}
.module-row .scrollbar-wrap {
	/* overflow-y: auto;*/
	overflow-x: hidden;
}
.module-row .el-scrollbar {
	height: 100%;
}
.module-row .el-col {
	height: 47px !important;
}
.module-row .row-height {
	height: 46px;
	line-height: 46px !important;
}
.checkbox-module .el-checkbox__input {
	position: absolute !important;
	right: 5px;
	top: 5px;
	z-index: 1;
}
.checkbox-module .el-checkbox__label {
	padding-bottom: 10px;
}
</style>
